<template>
    <div class="goodsinfo-container">
        <!-- 小球 begin -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!-- 商品幻灯区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <swiper :lunbotuList="lunboImg" :isfull="false"></swiper>
            </div>
        </div>
        <!-- 商品购买 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="ground">
                        市场价：
                        <del>￥{{goodsinfo.market_price}}</del>
                        &nbsp;&nbsp; 销售价：
                        <span class="now_price">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <div class="ground">
                        购买数量：
                        <numbox @getCount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox>
                    </div>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addShoppingCat">加入购物车</mt-button>
                </div>
            </div>
        </div>
        <!-- 商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsinfo.goods_no}}</p>
                    <p>库存情况：{{goodsinfo.stock_quantity}}</p>
                    <p>上架时间：{{goodsinfo.sell_price}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button plain size="large" type="primary" @click="goDesc(goodsinfo.id)">图文介绍</mt-button>
                <mt-button plain size="large" type="danger" @click="goComment(goodsinfo.id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
// 幻灯组件
import swiper from "../subcomments/swiper.vue";
// 购买输入框
import numbox from "../subcomments/goodsinfo_numbox.vue";
export default {
    data() {
        return {
            id: this.$route.params.id,
            lunboImg: [], // 获取到的轮播的数据
            goodsinfo: [], // 获取到的商品信息
            ballFlag: false, // 控制小球的隐藏和显示
            selectedcount: 1 // 保存用户选中的商品，默认用户买一个
        };
    },
    created() {
        this.getLunbo(); // 获取幻灯
        this.getinfo(); // 商品参数区和价格
    },
    methods: {
        // 获取幻灯
        getLunbo() {
            this.$http.get("api/getthumimages/" + this.id).then(result => {
                if (result.body.status === 0) {
                    result.body.message.forEach(item => {
                        item.img = item.src;
                    });
                    this.lunboImg = result.body.message;
                } else {
                    Toast("获取幻灯图片失败！");
                }
            });
        },
        // 商品参数区和价格
        getinfo() {
            this.$http.get("api/goods/getinfo/" + this.id).then(result => {
                if (result.body.status === 0) {
                    this.goodsinfo = result.body.message[0];
                }
            });
        },
        goDesc(id) {
            this.$router.push({ name: "goodsDesc", params: { id } });
        },
        goComment(id) {
            this.$router.push({
                name: "goodsComment",
                params: { id }
            });
        },
        // 添加到购物车
        addShoppingCat() {
            // 控制小球显示与隐藏
            this.ballFlag = !this.ballFlag;
            // 同步
            var goodsinfos = {
                id: this.id,
                count: this.selectedcount,
                price: this.goodsinfo.sell_price,
                selected: true
            }
            this.$store.commit( "addToCar" , goodsinfos );
   
        },
        //
        beforeEnter(el) {
            el.style.transform = "translate(0,0)";
        },
        enter(el, done) {
            el.offsetWidth;
            // 解决小球适配不同手机的问题
            // 1.通过 this.$refs.ball 获取小球元素
            // 2.通过 .getBoundingClientRect() 获取距离屏幕的距离
            const BallPosition = this.$refs.ball.getBoundingClientRect();
            const BadgePosition = document
                .getElementById("badge")
                .getBoundingClientRect();
            const xDist = BadgePosition.left - BallPosition.left;
            const yDist = BadgePosition.top - BallPosition.top;

            el.style.transform = `translate(${xDist}px , ${yDist}px)`;
            el.style.transition = "all 0.5s cubic-bezier(.27,-0.25,.68,.98)";
            done();
        },
        afterEnter(el) {
            this.ballFlag = !this.ballFlag;
        },
        // numBox
        getSelectedCount(count) {
            // 当子组件把 选中的数值传递给父组件，把选中的
            this.selectedcount = count;
        }
    },
    components: {
        swiper,
        numbox
    }
};
</script>

<style lang="scss">
.goodsinfo-container {
    overflow: hidden;
    background-color: #f1f1f1;
    .ground {
        margin-bottom: 10px;
    }

    .mui-card-footer {
        display: block;
        button {
            margin: 20px 0;
        }
    }
    .now_price {
        color: red;
        font-weight: 700;
        font-size: 16px;
    }
    .ball {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        position: absolute;
        left: 150px;
        top: 380px;
        z-index: 99;
        background-color: red;
    }
}
</style>
